<template>
  <view class="payment-keyboard" v-if="showKeyboard">
    <!-- 新增支付金额显示区域 -->
    <view class="amount-display">
      <text>支付金额: {{ amount }}</text>
    </view>
    <!-- 密码显示框区域 -->
    <view class="password-display">
      <view class="password-box" v-for="(digit, index) in passwordArray" :key="index"
        :class="{ 'active': index === currentIndex }">
        <text>{{ digit ? '●' : '' }}</text>
      </view>
    </view>
    <!-- 循环渲染键盘行 -->
    <view class="keyboard-row" v-for="(row, index) in keyboardLayout" :key="index">
      <view class="keyboard-key" v-for="(key, keyIndex) in row" :key="keyIndex" @click="handleKeyClick(key)">
        {{ key }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    amount: {
      type: String,
      default: '0.00'
    },
    // 新增跳转页面的路径
    redirectTo: {
      type: String,
      default: '/pages/home/index'  // 默认跳转到首页
    }
  },
  data() {
    return {
      showKeyboard: true, // 控制键盘显示与隐藏
      keyboardLayout: [
        ['1', '2', '3'],
        ['4', '5', '6'],
        ['7', '8', '9'],
        ['取消', '0', '确认']
      ],
      passwordArray: Array(6).fill(''), // 初始密码数组，长度为6，用空字符串占位
      currentIndex: 0 // 当前输入位置
    };
  },
  methods: {
    handleKeyClick(key) {
      if (key === '取消') {
        // 取消操作，清空密码数组和当前输入位置
        this.passwordArray = Array(6).fill('');
        this.currentIndex = 0;
        this.showKeyboard = false;  // 点击取消时关闭键盘
      } else if (key === '确认') {
        // 确认操作，检查密码是否满6位
        if (this.passwordArray.length === 6 && this.passwordArray.every(digit => digit !== '')) {
          const password = this.passwordArray.join('');
          // 触发父组件的事件，传递密码给父组件
          this.$emit('password-confirm', password);

          // 清空密码框
          this.passwordArray = Array(6).fill('');
          this.currentIndex = 0;

          // 提示支付成功
          uni.showToast({
            title: '支付成功',
            icon: 'success',
            duration: 2000
          });
          
          // 跳转到指定的页面
          uni.navigateTo({
            url: this.redirectTo
          });
        } else {
          // 如果密码不满6位，提示用户
          uni.showToast({
            title: '请输入完整密码',
            icon: 'none',
            duration: 2000
          });
        }
      } else if (/^\d$/.test(key) && this.currentIndex < 6) {
        this.passwordArray[this.currentIndex] = key;
        this.currentIndex++;
      } else if (key === '取消' && this.currentIndex > 0) {
        this.currentIndex--;
        this.passwordArray[this.currentIndex] = '';
      }
    }
  },
  watch: {
    '$props.amount': function(newAmount) {
      // 每次切换支付金额时重置密码输入框
      this.passwordArray = Array(6).fill('');
      this.currentIndex = 0;
    }
  }
};
</script>

<style scoped>
.amount-display {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  margin-bottom: 20px;
}

.payment-keyboard {
  display: flex;
  flex-direction: column;
  background-color: #f0f0f0;
  padding: 10px;
  height: 60%;
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
}

.keyboard-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.keyboard-key {
  width: 70px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  cursor: pointer;
}

.keyboard-key:active {
  background-color: #e0e0e0;
}

.password-display {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.password-box {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  background-color: white;
}

.password-box.active {
  border-color: #007aff;
}
</style>
